<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet">
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>

	</head>
	<body>
		<nav class="mui-bar mui-bar-tab myzx">
			<a id="defaultTab" class="mui-tab-item mui-active" href="./home/index.html">
				<span class="mui-icon iconfont icon-shouye"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a id="defaultTab" class="mui-tab-item" href="./class/index.html">
				<span class="mui-icon iconfont icon-fenlei"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item" href="./shopping/index.html">
				<span class="mui-icon iconfont icon-gouwuche"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item isloging" href="./my/index.html">
				<span class="mui-icon iconfont icon-wode"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		//mui初始化
		mui.init({
			subpages: [{
				url: "./home/index.html", //下拉刷新内容页面地址
				id: "./home/index.html", //内容页面标志
				styles: {
					
				}
			}]
		});
		var subpages = ['./home/index.html', './class/index.html', './shopping/index.html', './my/index.html'];
		var subpage_style = {
			top: '0px',
			bottom: '51px'
		};

		var aniShow = {};

		//创建子页面，首个选项卡页面显示，其它均隐藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for (var i = 0; i < 4; i++) {
				var temp = {};
				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
				if (i > 0) {
					sub.hide();
				} else {
					temp[subpages[i]] = "true";
					mui.extend(aniShow, temp);
				}
				self.append(sub);
			}

		});
		//当前激活选项
		var activeTab = subpages[0];
		var title = document.getElementById("title");
		//选项卡点击事件
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			if (targetTab == activeTab) {
				return;
			}
			//更换标题

			//显示目标选项卡
			//若为iOS平台或非首次显示，则直接显示
			if (mui.os.ios || aniShow[targetTab]) {
				plus.webview.show(targetTab);
			} else {
				//否则，使用fade-in动画，且保存变量
				var temp = {};
				temp[targetTab] = "true";
				mui.extend(aniShow, temp);
				plus.webview.show(targetTab, "fade-in", 300);
			}
			//隐藏当前;
			plus.webview.hide(activeTab);
			//更改当前活跃的选项卡
			activeTab = targetTab;
		});
		//自定义事件，模拟点击“首页选项卡”
		document.addEventListener('gohome', function() {
			var defaultTab = document.getElementById("defaultTab");
			//模拟首页点击
			mui.trigger(defaultTab, 'tap');
			//切换选项卡高亮
			var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
			if (defaultTab !== current) {
				current.classList.remove('mui-active');
				defaultTab.classList.add('mui-active');
			}
			var url = this.getAttribute("id"); //getAttribute()获取属性函数
			mui.openWindow({
				url: url,
				id: url,
				styles: {
					top: '0px', //新页面顶部位置
					bottom: '0px', //新页面底部位置
					popGesture: 'close'
				},
				extras: {},
				waiting: {
					autoShow: false
				}
			})
		});
	</script>
</html>
